<template>
    <div>
        <el-table
            :data="tableData"
            stripe
            border
            :highlight-current-row="true"
            @selection-change="selectionChangeHandle"
            @row-click ="rowClickHandle"
            style="width: 100%">

            <el-table-column
                v-if="false"
                type="selection"
                align="center"
                fixed="left"
                width="55">
            </el-table-column>

            <el-table-column
                type="index"
                :index="indexMethod"
                align="center"
                fixed="left"
                width="50">
            </el-table-column>

            <el-table-column
                property="authName"
                label="权限名称">
            </el-table-column>

            <el-table-column
                property="role"
                align="center"
                label="所属角色">
                <template slot-scope="scope">
                    <div slot="reference" class="name-wrapper">
                        {{ scope.row.role | roles}}
                    </div>
                </template>
            </el-table-column>

            <el-table-column
                property="enabled"
                align="center"
                width="90"
                label="是否可用">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled" size="medium" type="success">{{ scope.row.enabled | enabledFilter
                        }}
                    </el-tag>
                    <el-tag v-else="scope.row.enabled" size="medium" type="info">{{ scope.row.enabled | enabledFilter }}
                    </el-tag>
                </template>
            </el-table-column>

            <!--<el-table-column-->
                <!--property="parentName"-->
                <!--label="父权限">-->
            <!--</el-table-column>-->

            <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="120">
                <template slot-scope="scope">
                    <!--<el-button @click="editHandle(scope.row)" type="text" size="small">编辑-->
                    <!--</el-button>-->
                    <el-button @click="deleteHandle(scope.row)" type="text" size="small">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>

        <div class="pagination">
            <el-pagination
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="pageTotal">
            </el-pagination>
        </div>

    </div>
</template>

<script>

    export default {
        mounted() {
            this.loadData();
        },
        components: {

        },
        props: {

        },
        filters: {
            enabledFilter: function (val) {
                if (val) {
                    return "可用";
                }
                return "禁用";
            },
        },
        data() {
            return {
                tableData: [],
                currentPage: 1,
                pageTotal: 0,
                pageSize: 10,
            }
        },
        computed: {

        },
        methods: {
            /*索引排序*/
            indexMethod(index) {
                if (this.currentPage > this.pageTotal / this.pageSize) {
                    if (this.pageTotal % this.pageSize === 0) {
                        this.currentPage = parseInt(this.pageTotal / this.pageSize);
                    } else {
                        this.currentPage = parseInt(this.pageTotal / this.pageSize) + 1;
                    }
                }
                return index + this.pageSize * (this.currentPage - 1) + 1;
            },
            handleCurrentChange: function (val) {
                this.currentPage = val;
                this.loadData();
            },
            loadData: function (filter) {
                let _this = this;
                let params = Object.assign({}, {
                    pageSize: _this.pageSize,
                    pageNo: _this.currentPage
                }, filter);

                this.$ajax.get("auth/role_view/paging", {
                    params: params,

                }).then(res => {
                    _this.tableData = res.data.rows;
                    _this.pageTotal = res.data.total;
                })
            },
            /**
             * 修改
             */
            editHandle: function (data) {
                this.$emit('onEdit', data.id);
            },
            /**
             * 表格选中处理
             */
            selectionChangeHandle: function (selection) {
                this.$emit('selectionChange', selection);
            },
            /**
             * 行选中
             */
            rowClickHandle:function (row, event, column) {
                this.$emit('rowClick', row, event, column);
            },
            /**
             *  权限删除
             */
            deleteHandle: function (row) {

                if (row.role === 'ADMIN') {
                    this.$message.warning("禁止删除管理员角色");
                    return;
                }
                
                let _this = this;
                this.$confirm('你真的删除这【' + row.authName + '】个权限吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    _this.$ajax.delete('/auth/role_view/dml/'+row.id).then(res => {
                        if (res.code !== "ok") {
                            _this.$message.error(res.msg);
                        } else {
                            this.$emit('deleteSuccess', row);
                        }
                    });
                })
            },
        },
        watch: {

        },
        beforeDestroy() {

        }
    }
</script>

<style scoped>

</style>
